var timeline = new Object();
/** 
 * Configure blow this lines
 * TO_LOAD the number of items to load when you press the more button.
 * INIT_LOAD the number of item to be load of the document is ready.
 */
timeline.TO_LOAD = 3;
timeline.INIT_LOAD = 6;
timeline.DATE_BLOCK_SIZE = 30;

/* Don't touch the script below */
timeline.response = '';
timeline.currentlyLoaded = 0;
timeline.div;
timeline.divLeft;
timeline.divRight;
timeline.divHidden;
timeline.heightLeft = 0;
timeline.heightRight = 0;
timeline.isRight = false;
timeline.currentDate = "";
timeline.currentMonth = "";
timeline.hash;

timeline.init = function()
{
        if(typeof window.addEventListener != 'undefined')
                        window.addEventListener('load', timeline.bodyLoaded, false);
        else if(typeof document.addEventListener != 'undefined')
                        document.addEventListener('load', timeline.bodyLoaded, false);
        else if(typeof window.attachEvent != 'undefined')
                        window.attachEvent('onload', timeline.bodyLoaded);
        timeline.hash = window.location.hash.replace('#', '');
}
timeline.getItems = function(amount, cut)
{
        document.getElementById("timeline_more").className += " loading";
        timeline.currentlyLoaded += amount;
        timeline.read("php/getData.php?begin=" + (timeline.currentlyLoaded-amount) + "&offset=" + amount + "&cut=" + cut, timeline.itemsLoaded);
}
timeline.bodyLoaded = function()
{

        with(timeline)
        {
                div = document.getElementById('timeline');
                console.log(timeline.response)
                div.innerHTML = '\
                        <div id="timeline_left"></div><div id="timeline_right"></div>\
                        <div id="timeline_more" onclick="timeline.getItems(' + TO_LOAD + ', timeline.hash);">toon meer afspraken</div>\
                        <div style="position: fixed; left: -99999; right: -99999;" id="timeline_hidden"></div>\
                        ';
                divLeft = document.getElementById('timeline_left');
                divRight = document.getElementById('timeline_right');
                divHidden = document.getElementById('timeline_hidden');
                getItems(INIT_LOAD, timeline.hash);
        }
}
timeline.generateItem = function(id, title, begin, end, description, allDay, extraClass)
{
        var dateBeginArray = begin.match(/([0-9]{4})-([0-9]{2})-([0-9]{2}) ([0-9]{2}):([0-9]{2}):([0-9]{2})/);
        var dateEndArray = end.match(/([0-9]{4})-([0-9]{2})-([0-9]{2}) ([0-9]{2}):([0-9]{2}):([0-9]{2})/);
        
       

        if (allDay){
                                var ifvalue = 'Hele dag'; 
                        }
                        
                        else if(dateBeginArray[3]+dateBeginArray[2] == dateEndArray[3]+dateEndArray[2]){
                                var ifvalue = "tot " + dateEndArray[4] + ":"+ dateEndArray[5];
                                
                        }
                        else{
                                var ifvalue = "tot " + dateEndArray[3] + "-" + dateEndArray[2] + "-" + dateEndArray[1] + " " + dateEndArray[4] + ":"+ dateEndArray[5];
                        }
	
		if(id == 'timeline_item_id_placed_1'){
						var background = ' style=" background-color:#acd038; "';
                                                var type = 'Boeking';
		}
		else if(id == 'timeline_item_id_placed_2'){
						var background = ' style=" background-color:#fdcc27; "';
                                                var type = 'Optie';
		}
		else if(id == 'timeline_item_id_placed_3'){
						var background = ' style=" background-color:#1aa2bc; "';
                                                var type = 'Repetitie';
		}
		else if(id == 'timeline_item_id_placed_4'){
						var background = ' style=" background-color:#e80b75; "';
                                                var type = 'Prive';
		}
		else if(id == 'timeline_item_id_placed_5'){
						var background = ' style=" background-color:#656364; "';
                                                var type = 'Blokkade';
		}
		
					else{
						var background ='';
                                                var type = '';
					}
                

		

        var html = '<div class="timeline_item ' + extraClass + '" id="' + id + '" '+ background + '>';
           html += '<div class="title"><b>'+ type + ' - ' + title + '</b></div><div class="content"><div class="datum"> ' + dateBeginArray[3] + "-" + dateBeginArray[2] + "-" +dateBeginArray[1]+ ' ' + dateBeginArray[4] + ':' + dateBeginArray[5];
           html += ' - ' + ifvalue + '</div><div class="omschrijving"> <hr align="left">' + description + '</div></div></div>'

        return html;
}
timeline.itemsLoaded = function()
{
        var items = JSON.parse(timeline.response);
        var html = '';
        
        for(i in items)
        {
                var item = items[i];
                html += timeline.generateItem(
                        'timeline_item_id_hidden_' + item.id, 
                        item.title,
                        item.start,
                        item.end,
                        item.omschrijving,
                        item.allDay,
                        ''
                );
                
        }
        divHidden.innerHTML += html;
        for(i in items)
        {
                var item = items[i];
                if(item.start.split(" ")[0] != timeline.currentDate)
                {
                        timeline.currentDate = item.start.split(" ")[0];
                        var time = timeline.currentDate.match(/([0-9]{4})-([0-9]{2})-([0-9]{2})/)
                        timeline.showDateBlock(time[3] + "-" + time[2] + "-" + time[1]);
                }
                var itemHeight = document.getElementById('timeline_item_id_hidden_' + item.id).clientHeight;
                timeline.heightLeft = document.getElementById('timeline_left').clientHeight;
                timeline.heightRight = document.getElementById('timeline_right').clientHeight;
                
                if(timeline.heightRight >= timeline.heightLeft)
                {
                        //console.log("I chose right because: " + timeline.heightRight + " >= " + timeline.heightLeft);
                        var html = timeline.generateItem(
                                'timeline_item_id_placed_' + item.id, 
                                item.title,
                                item.start,
                                item.end,
                                item.omschrijving,
                                item.allDay,
                                'timeline_item_left'
                        );
                        divLeft.innerHTML += html;
                        //timeline.heightLeft += itemHeight;
                }else{
                       // console.log("I chose left because: " + timeline.heightRight + " >= " + timeline.heightLeft);
                        var html = timeline.generateItem(
                                'timeline_item_id_placed_' + item.id, 
                                item.title,
                                item.start,
                                item.end,
                                item.omschrijving,
                                item.allDay,
                                'timeline_item_right'
                        );
                        divRight.innerHTML += html;
                        //timeline.heightRight += itemHeight;
                }
        }
        //with(document.getElementById("timeline_more"))
        //{
         //       className = className.replace( /(?:^|\s)loading(?!\S)/ , '' );
        //}
        divHidden.innerHTML = "";
}

timeline.showDateBlock = function(date)
{
        var dateArray = date.match(/([0-9]{2})-([0-9]{2})-([0-9]{4})/);
        var month = dateArray[2];
        var year = dateArray[3];
        var monthNames = [ " ", "Januari", "Februari", "Maart", "April", "Mei", "Juni","Juli", "Augustus", "September", "Oktober", "November", "December" ];
       
        


        if(timeline.currentMonth != monthNames[Math.round(month)])
        {
                 timeline.heightLeft = document.getElementById('timeline_left').clientHeight;
                timeline.heightRight = document.getElementById('timeline_right').clientHeight;
                var rightDist = (timeline.heightLeft > timeline.heightRight) ? timeline.DATE_BLOCK_SIZE+(timeline.heightLeft-timeline.heightRight) : timeline.DATE_BLOCK_SIZE;
                var leftDist = (timeline.heightLeft < timeline.heightRight) ? timeline.DATE_BLOCK_SIZE+(timeline.heightRight-timeline.heightLeft) : timeline.DATE_BLOCK_SIZE;
                divRight.innerHTML += '<div class="date_spacer_right" style="height: ' + rightDist + 'px"></div>';
                divLeft.innerHTML += '<div class="date_spacer_left" style="height: ' + leftDist + 'px"></div>';
                divRight.innerHTML += '<div class="date_block">' + monthNames[Math.round(month)] + '</div>';
              // document.getElementById('timeline_months').innerHTML += "<a href=\"#" + year + month + "\" onclick=\"location.reload(true)\">" + monthNames[Math.round(month)] + "</a><br/>"
                timeline.currentMonth = monthNames[Math.round(month)];

        }
        timeline.heightLeft = document.getElementById('timeline_left').clientHeight;
        timeline.heightRight = document.getElementById('timeline_right').clientHeight;
        var rightDist = (timeline.heightLeft > timeline.heightRight) ? timeline.DATE_BLOCK_SIZE+(timeline.heightLeft-timeline.heightRight) : timeline.DATE_BLOCK_SIZE;
        var leftDist = (timeline.heightLeft < timeline.heightRight) ? timeline.DATE_BLOCK_SIZE+(timeline.heightRight-timeline.heightLeft) : timeline.DATE_BLOCK_SIZE;

        divRight.innerHTML += '<div class="date_spacer_right" style="height: ' + rightDist + 'px"></div>';
        divLeft.innerHTML += '<div class="date_spacer_left" style="height: ' + leftDist + 'px"></div>';
        divRight.innerHTML += '<div class="date_block">' + date + '</div>';
       

        
}
timeline.read = function(url, action)
{
        this.res = '';
        if(window.XMLHttpRequest)
        {
                xmlhttp = new XMLHttpRequest();
        }
        else
        {
                xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
        }
        xmlhttp.open('POST', url + '&t=' + new Date().getTime(), true);
        xmlhttp.onreadystatechange = function()
        {
                if(xmlhttp.readyState == 4)
                {
                        timeline.response = xmlhttp.responseText;

                        action();
                }
        }
        xmlhttp.send();
}
timeline.init();